<template>
	<view class="contract">
		<!-- 自定义导航栏 -->
		<view :style="{ 'height': navBarHeight + 'px' }" class="custom-nav-bar">
			<view class="nav-title">个人中心</view>
		</view>
		<view class="page-content">
			<view class="my-user flex-between-mian" @click="goLogin(0)">
				<view class="flex-between-mian">
					<view class="user-avatar">
						<image src="https://www.zxsl.zxmap.cn/zxch-app/2025/07/01/73ba803b2542486dbb56e247c09498a4.png" mode="aspectFit"></image>
					</view>
					<view class="text-line user-mian marlf10" v-if="getToken()">
						{{userName}}
					</view>
					<view class="text-line marlf10" v-else>
						<view class="user-mian">
							未登录
						</view>
						<view class="user-info">
							登录会议速记宝，体验更多功能
						</view>
					</view>
				</view>
				<view v-show="!getToken()" class="show-login" @click="goLogin()">
					立即登录
				</view>
			</view>
			<view class="my-tools">
				<view class="" style="font-size: 18px;padding-bottom: 20px;">
					我的工具
				</view>
				<view class="tools-container">
					<view class="item" @click="goLogin(1)">
						<uni-icons custom-prefix="iconfont" type="icon-yijianfankui2" size="23"
							color="#000"></uni-icons>
						<view class="item-text">
							意见反馈
						</view>
					</view>
					<button open-type="contact" class="item item-btn" v-show="getToken()">
						<uni-icons custom-prefix="iconfont" type="icon-lianxikefu" size="23"
							color="#000"></uni-icons>
						<view class="item-text">
							联系客服
						</view>
					</button>
					<view class="item" v-show="getToken()">
						<uni-icons custom-prefix="iconfont" type="icon-tuichudenglu" size="23"
							color="#000" @click="loginOut"></uni-icons>
						<view class="item-text">
							退出登录
						</view>
					</view>
				</view>
			</view>
		</view>
<!-- 		<view>
			<uni-popup ref="logoutDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" title="退出登录" content="是否确认退出登录?"
					@confirm="logoutConfirm" @close="logoutClose"></uni-popup-dialog>
			</uni-popup>
		</view> -->
	</view>
	
	<up-popup :show="logoutDialog" mode="center"  @close="logoutDialog = false" @open="logoutDialog = true">
		<view style="padding: 40rpx;">
			<text>是否确认退出登录？</text>
		</view>
		<view style="display: flex;justify-content: space-around;padding-bottom: 40rpx;">
			<view @click="logoutDialog = false"><u-button type="info" text="取消"></u-button></view>
			<view @click="logoutConfirm"><u-button type="error" text="确定"></u-button></view>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref, onMounted, reactive } from 'vue';
	import { getToken } from '@/utils/auth';
	import { useAuthStore } from '@/store/index';
	import { getAiAskList, detContractTask } from '@/api/list.js';
	import { onShow } from '@dcloudio/uni-app'
	
	const navBarHeight = ref(0);
	const authStore = useAuthStore();
	const userInfo = ref(null)
	const userName = ref(null)
	const logoutDialog = ref(false)
	
	const reSetNavbar = (e) => {
		if(e == pageValue.value) return
		if(e == 1) {
			uni.navigateTo({
				url:'/pages/list/index'
			});
		}else {
			uni.navigateTo({
				url:'/pages/home/index'
			});
		}
	}

	const loginOut = () => {
		// logoutDialog.value.open()
		logoutDialog.value = true
	}
	
	const logoutConfirm = async () => {
		logoutDialog.value = false
		await authStore.logout()
		await uni.redirectTo({
			url:'/pages/login/index'
		})
	}
	
	const logoutClose = () => {
		logoutDialog.value.close()
		logoutDialog.value = false
	}
	
	const goLogin = (val) => {
		if(!getToken()){
			uni.redirectTo({
				url:'/pages/login/index'
			})
			return
		}
		if(val == 1) {
			uni.navigateTo({
				url:'/pages/user/opinion'
			})
		}
	}
	
	onShow(() => {
		try{
			if(uni.getStorageSync('isLogined')){
				authStore.userId = uni.getStorageSync('loginInfo').user.userId
				userInfo.value = uni.getStorageSync('loginInfo').user
				userName.value = userInfo.value.userName
			}
		}catch {}
	})
	
	onMounted(async () => {
		try {
			const res = await uni.getSystemInfo();
			// 获取状态栏高度（刘海高度）
			const statusBarHeight = res.statusBarHeight;
			// 标准导航栏高度，一般为 44px（iOS）或 48px（Android）
			const defaultNavBarHeight = res.platform === 'ios' ? 44 : 48;
			// 计算自定义导航栏的高度
			navBarHeight.value = statusBarHeight + defaultNavBarHeight;
		} catch (error) {
			console.error('获取设备信息失败:', error);
		}
		authStore.getInfoData()
	});
</script>

<style>
	.contract {
		background-color: #f0f4f9;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}
	
	.custom-nav-bar {
		position: relative;
		top: 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F2F3F5;
		z-index: 99;
	}
	
	.nav-title {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		position: absolute;
		bottom: 20rpx;
	}
	
	.nav-back {
		font-weight: bold;
		position: absolute;
		bottom: 20rpx;
		left: 20rpx
	}
	.page-content {
	    flex: 1;
	}
	.u-tabbar-item {
		padding-top: 10px;
	}
	.u-page__item__slot-icon{
		width: 30px;
		height: 30px;
	}
	.page-content {
		flex: 1;
		padding: 10px 20px;
	}
	
	.my-user {
		padding-top: 8%;
	}
	
	.user-avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
	}
	
	.user-avatar image {
		width: 100%;
		height: 100%;
	}
	
	.user-mian {
		font-size: 20px;
		font-weight: 700;
	}
	
	.user-info {
		font-size: 13px;
		color: #565f7f;
		margin-top: 5px;
	}
	
	.show-login {
		padding: 5px 10px;
		color: #fff;
		background-color: #2979ff;
		border-radius: 40px;
		flex-shrink: 0;
		font-size: 13px;
	}
	
	.my-tools {
		border-radius: 20px;
		background-color: #fff;
		padding: 20px;
		margin-top: 20px;
	}
	
	.tools-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* 3 等分列 */
		gap: 10px;             /* 可选：间距 */
		padding-top: 10px;
	}
	
	.item {
		text-align: center;
	}
	
	.item-text {
		line-height: 2;
		font-size: 13px;
	}
	
	.item-btn {
		border-radius: unset;
		background-color: transparent;
		-webkit-tap-highlight-color: transparent;
		color: #000;
		cursor: pointer;
		display: block;
		font-size: 18px;
		line-height: unset;
		margin-left: unset;
		margin-right: unset;
		overflow: hidden;
		border: unset;
		box-sizing: unset;
		padding-left: unset;
		padding-right: unset;
	}
	
	.item-btn::after {
		border: unset;
		border-radius: unset;
		box-sizing: unset;
	}
	.flex-between-mian {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>